<template>
  <view>
    <view class="addr-container">
       <view v-if="address.userName" class="addr-box">
          <view class="addr-info">
            <text>{{address.userName}}</text>
            <text>{{address.telNumber}}</text>
          </view>
          <view class="detail">{{addrDetail}}</view>
       </view>
       <button v-else @click="chooseAddr"> + 添加收获地址</button>
    </view>
    <view class="cart-container">
       <view class="cart-item" v-for="(item,index) in goodsList" :key="index">
         <checkbox-group @change="cartCheck(index)">
            <checkbox :checked="item.checked">
            </checkbox> 
         </checkbox-group>
         <view class="pic">
           <image :src="item.goods_small_logo"></image>
         </view>
         <view class="desc">
           <view class="title">{{item.goods_name}}</view>
           <view class="calc-box">
             <view class="price">￥{{item.goods_price}}</view>
             <view class="count-box">
                <view class="update" @click="updateCount(-1,index)">-</view>
                <view class="val">{{item.count}}</view>
                <view class="update" @click="updateCount(1,index)">+</view>
             </view>
           </view>
         </view>
       </view>
    </view>
    <view class="btm-tool">
      <checkbox-group @change="changeAllCheck">
         <checkbox :checked="allChecked"></checkbox>全选
      </checkbox-group>
      <view class="total-box">
        <view class="total-price">
          <text>合计</text>
          ￥{{totalPrice}}
        </view>
        <view class="yun">包含运费</view>
      </view>
      <view class="settle" @click="settle">结算({{allCheckTypes}})</view>
    </view>
  </view>
</template>

<script>
export default {
   data(){
     return{
        goodsList:[],
        address:{}
     }
   },
   watch:{
      goodsList:{
        deep:true,
        handler(newCarts){
          //  每次有修改缓存数据的处理
          uni.setStorageSync('carts', newCarts);
        } 
      }
   },
   computed:{
       addrDetail(){
         return (
           this.address.provinceName + 
           this.address.cityName + 
           this.address.countyName + 
           this.address.detailInfo
         );
       },
       allCheckTypes(){
          return this.goodsList.filter(v=>v.checked).length;
       },
       allChecked(){
         if(this.goodsList.length <= 0)return false;
         return this.goodsList.every(v => v.checked == true);
       },
       totalPrice(){
         let total = 0;
          this.goodsList.forEach(item => {
              if(item.checked){
                  total += item.goods_price * item.count;
              }
          });
          return total;
       }
     },
   methods:{
     chooseAddr(){
       //微信的方法，选择地址  
       uni.chooseAddress({
          success:result => {
            this.address = result
            uni.setStorageSync('address', this.address)
          }
       })
     },
     updateCount(num,index){
        if(num == -1 && this.goodsList[index].count == 1){
           uni.showModal({
              title: '提示',
              content: '是否删除？',
              success:(res)=>{
                if (res.confirm) {
                   this.goodsList.splice(index,1);
                } else if (res.cancel) {
                  //
                }
              }
          })
        }else{
          this.goodsList[index].count += num;
        }  
     },
     //商品check事件 
     cartCheck(index){
        this.goodsList[index].checked = !this.goodsList[index].checked;
     },
     //全选改变  
     changeAllCheck(){
        let allChecked = !this.allChecked;
        this.goodsList.forEach(v=>v.checked = allChecked);
     },
     settle(){
        if(this.address.userName && this.allCheckTypes){
           //代码 跳转页面 
           uni.navigateTo({url: "/pages/pay/index"})
        }else{
          uni.showToast({
            title: '您还没有选中商品或者收货地址',
            icon:'none'
          })
        }
     }
   },
   //拉起小程序时加载一次  
   onLoad(){
     this.goodsList = uni.getStorageSync('carts') || [];
   },
   //页面隐藏时调用  
   onHide(){
     console.log('页面被隐藏');
   },
   //页面被卸载时调用
   onUnload(){
     console.log('页面被卸载');
   },
   //切换页面时使用（加载数据）  
   onShow(){
      this.goodsList = uni.getStorageSync('carts') || [];
      this.address = uni.getStorageSync('address') || [];
   }
}
</script>

<style lang="scss">
view.addr-container {
  border-bottom:1px solid #c0c0c0;
  .addr-box{
    padding:20rpx;
    .addr-info{
      display:flex;
      justify-content: space-between;
      margin-bottom: 10rpx;
    }
    .detail{

    }
  }
  button {
    margin: 50rpx auto;
    width:340rpx;
    height:60rpx;
    line-height: 60rpx;
    font-size: 28rpx;
    border:1px solid $theme-color;
    background-color: #F8F8F8;
  }
}

.cart-container {
  padding-bottom: 90rpx;
  .cart-item {
    display: flex;
    justify-content: center;
    padding:20rpx;
    padding-left: 0;
    border-bottom:1px solid #c0c0c0;
    checkbox-group {
      flex:1;
      display: flex;
      justify-content: center;
      align-items: center;
      checkbox {
         
      }
    }
    .pic{
      flex:2;
      image {
        height:200rpx;
        
    
      }
    }
    .desc {
      flex:3;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding:20rpx 0;
      .title {
        padding-left: 20rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 弹性伸缩盒子模型显示 */
        display: -webkit-box;
        /* 限制在一个块元素显示的文本的行数 */
        -webkit-line-clamp: 2;
        /* 设置或检索伸缩盒对象的子元素的排列方式 */
        -webkit-box-orient: vertical;
        // 拆散单词
        word-break: break-all;

      }
      .calc-box {
        display: flex;
        justify-content: space-between;
        .price {
          font-size: 32rpx;
          color: $theme-color;
        }
        .count-box{
          display: flex;
          align-items: center;
          .update{
            width:50rpx;
            height:50rpx;
            text-align: center;
            line-height: 45rpx;
            font-size: 32rpx;
            border:1px solid #B2B2B2;
          }
          .val{
            padding:0 10rpx;
            font-size: 32rpx; 
          }
        }
      }
    }
  }
}
.btm-tool {
  position: fixed;
  left:0;
  bottom:0;
  width:100vw;
  height:90rpx;
  display: flex;
  border:1px solid #c0c0c0;
  background-color: #fff;
  checkbox-group {
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
    checkbox {

    }
  }

  .total-box {
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding-right: 20rpx;
    .total-price {
       font-size: 32rpx;
       color: $theme-color;
       text{
         color: #000;
       }
    }
    view {

    }
  }

  .settle {
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $theme-color;
    font-size: 32rpx;
    color: #fff;
  }
}
</style>